<template>
  <div class="page">
    <!-- 功能区 -->
    <div class="function-area">
      <!-- 返回按钮和标题 -->
      <div class="header">
        <button class="back-btn" @click="goBack">
          <img
            src="@/assets/xiangmujindu/arrow_right.png"
            style="margin-left: -16px; width: 22px; transform: rotate(180deg)"
          />
        </button>
        <h3>派工</h3>
      </div>
      <!-- Tab 切换 -->
      <div class="tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab', { active: activeTab === index }]"
          @click="activeTab = index"
        >
          {{ tab }}
        </div>
      </div>
      <!-- 文本框 -->
      <div v-if="activeTab === 0" class="search-bar" style="position: relative">
        <input
          type="text"
          placeholder="请输入姓名或手机号查询"
          style="padding-left: 26px"
        />
        <img
          src="../assets/xiangmujindu/pg_icon_search.png"
          style="position: absolute; left: 8px; top: 9px; width: 14px"
          alt=""
          srcset=""
        />
      </div>
    </div>

    <!-- 内容区 -->
    <div
      class="content-area"
      :style="{ background: activeTab === 0 ? '#f4f5f9' : '#fff' }"
    >
      <!-- 派单内容 -->
      <div v-if="activeTab === 0">
        <!-- 2.1 四个文本 -->
        <div class="text-row">
          <span
            v-for="(name, index) in names"
            :key="name"
            class="text-box"
            @click="addSignMem(name, index)"
          >
            {{ name }}
          </span>
        </div>
        <!-- 2.2 分配成员 -->
        <div class="assigned-members">
          <h3 style="margin: 26px 0 14px">已分配成员</h3>
          <div class="member-list">
            <div
              v-for="(member, index) in assignedMembers"
              :key="index"
              class="member-item"
            >
              <img src="@/assets/xiangmujindu/icon_phone.png" alt="电话" />
              <span>{{ member.name }}</span>
              <template v-if="index == 1">
                <span class="tp2">{{ member.tp }}</span>
              </template>
              <template v-else>
                <span class="tp">{{ member.tp }}</span>
              </template>
              <button class="remove-btn" @click="removeMember(index)">
                移除
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 排班内容 -->
      <div v-else>
        <!-- 3.3 按钮 -->
        <div class="action-buttons">
          <button @click="goToPage('usersearch')">
            <img
              src="@/assets/xiangmujindu/pg_icon_xzcy.png"
              alt="新增"
              :style="{ width: '40px', height: '40px' }"
            />
            <span>新增成员</span>
          </button>
          <!-- <button @click="goToPage('useradd')">
            <img
              src="@/assets/xiangmujindu/pg_icon_pltj.png"
              alt="批量新增"
              :style="{ width: '40px', height: '40px' }"
            />
            <span>批量新增</span>
          </button> -->
        </div>
        <!-- 3.4 表格 -->
        <div class="schedule-table">
          <table>
            <!-- 第一行 -->
            <tr :style="{ background: '#F0F6E8', height: '40px' }">
              <td
                colspan="6"
                style="border-right-style: none; padding-left: 5em"
              >
                {{ currentWeek }}
              </td>
              <td
                colspan="2"
                class="batch-schedule"
                style="border-left-style: none"
                @click="goToPage('piliangpaiban')"
              >
                批量排班
              </td>
            </tr>
            <!-- 第二行 -->
            <tr style="height: 40px">
              <td class="first-cell">姓名/日期</td>
              <td v-for="(day, index) in weekDays" :key="index" class="week">
                <div style="font-weight: bold">{{ day.week }}</div>
                <div>{{ day.date }}</div>
              </td>
            </tr>
            <!-- 数据行 -->
            <tr v-for="name in scheduleNames" :key="name" style="height: 40px">
              <td class="first-cell">{{ name }}</td>
              <td v-for="(_, index) in 7" :key="index">
                <template v-if="generateRandomNumber() % 3 == 0">
                  <div style="background-color: #feeccb">
                    <div class="time-slot">09:00</div>
                    <div class="time-slot">18:00</div>
                  </div>
                </template>
                <template v-else>
                  <button class="schedule-btn" @click="goToPage('paiban')">
                    排班
                  </button>
                </template>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      // Tab 切换
      tabs: ["派单", "排班"],
      activeTab: 0,
      // 数据
      names: ["刘志飞", "刘宇", "黄桥", "林志杰"],
      assignedMembers: [
        { name: "张辉明 - 137****7229", tp: "自有" },
        { name: "黄冰冰 - 168****2431", tp: "外雇" },
        { name: "张志强 - 185****4383", tp: "自有" },
      ],
      currentWeek: "",
      weekDays: [],
      scheduleNames: ["康永辉", "邓英", "黄飞", "刘志杰", "林家栋", "凌志"],
    };
  },
  created() {
    // 初始化周日期
    this.initWeekDays();
    // if (this.$route.params && this.$route.params.id) {
    //   this.activeTab =1
    // }
  },
  methods: {
    generatePhone() {
      var firstThree = Math.floor(Math.random() * 1000)
        .toString()
        .padStart(3, "0");
      var lastFour = Math.floor(Math.random() * 10000)
        .toString()
        .padStart(4, "0");
      return `1${firstThree.slice(0, 2)}****${lastFour}`;
    },

    addSignMem(name, i) {
      this.names.splice(i, 1);
      this.assignedMembers.push({
        name: name + " - " + this.generatePhone(),
        tp: Math.random() * 10 > 5 ? "自有" : "外雇",
      });
    },
    goBack() {
      this.$router.back();
    },
    goToPage(page) {
      this.$router.push({ name: page });
    },
    removeMember(index) {
      alert("已删除");
      this.assignedMembers.splice(index, 1);
    },
    addMember() {
      alert("新增成员");
    },
    batchAddMember() {
      alert("批量新增成员");
    },
    goToBatchSchedule() {
      alert("跳转至批量排版");
    },
    goToSchedule() {
      alert("跳转至排班页面");
    },
    generateRandomNumber() {
      return Math.floor(Math.random() * 100);
    },
    initWeekDays() {
      const now = new Date();
      const dayOfWeek = now.getDay(); // 当前是周几
      const startOfWeek = new Date(
        now.getTime() - dayOfWeek * 24 * 60 * 60 * 1000
      ); // 本周日
      const days = [];
      for (let i = 0; i < 7; i++) {
        const date = new Date(startOfWeek.getTime() + i * 24 * 60 * 60 * 1000);
        days.push({
          week: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()],
          date: date.getDate(),
        });
      }
      this.currentWeek = `${startOfWeek.getFullYear()}/${
        startOfWeek.getMonth() + 1
      }/${days[0].date}-${startOfWeek.getMonth() + 1}/${days[6].date}`;
      this.weekDays = days;
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (["paiban", "usersearch", "piliangpaiban"].includes(from.name)) {
        vm.activeTab = 1;
      }
    });
  },
};
</script>


<style scoped>
.page {
  font-size: 13px;
  color: #474747;
}

/* 功能区 */
.function-area {
  background-color: white;
  padding: 10px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
  left: 10px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
h1 {
  margin: 0;
}

/* Tab 切换 */
.tabs {
  display: flex;
  margin-top: 10px;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.tab {
  text-align: center;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #f4f5f9;
  color: black;
  border-radius: 5px;
  padding: 10px 36px;
}
.tab.active {
  background-color: #98c356;
  color: white;
}

/* 文本框 */
.search-bar input {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 内容区 */
.content-area {
  background-color: #fff;
  padding: 8px 10px;
  margin-top: 7px;
}
.text-row {
  justify-content: space-between;
  padding: 0px 5px;
}
.text-box {
  padding: 5px 10px;
  border-radius: 20px;
  background-color: white;
  font-size: 12px;
  margin-right: 8px;
}

/* 分配成员 */
.assigned-members h3 {
  margin-bottom: 5px;
}
.member-list {
  background-color: white;
  border-radius: 5px;
  padding: 5px;
}

.member-list img {
  width: 20px;
  height: 20px;
  margin-right: 15px;
}

.member-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f4f5f9;
}
.member-item:last-child {
  border-bottom: none;
}

.member-item .tp {
  border: 1px solid;
  border-radius: 5px;
  margin-left: 10px;
  color: #7e974a;
  padding: 0px 5px;
}
.member-item .tp2 {
  border: 1px solid;
  border-radius: 5px;
  margin-left: 12px;
  padding: 0px 5px;
  color: #c9ae5d;
}

.remove-btn {
  margin-left: auto;
  color: #b86250;
  background: none;
  border: none;
  cursor: pointer;
}

/* 按钮 */
.action-buttons {
  display: flex;
  justify-content: space-around; /**设置tab按钮居中 */
  margin-bottom: 10px;
}
.action-buttons button {
  width: 98%;
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 5px 10px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background-color: #f4f5f9;
}
.action-buttons img {
  margin-right: 5px;
}

/* 表格 */
.schedule-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
table,
tr,
td {
  font-size: 13px;
}
.schedule-table th,
.schedule-table td {
  border: 1px solid #ddd;
  /* padding: 5px; */
}
.schedule-table .first-cell {
  text-align: left;
  font-weight: bold;
}

.schedule-table .week {
  text-align: center;
}

.schedule-table th {
  background-color: #f0f6e8;
}
.batch-schedule {
  color: #7e9b4f;
  cursor: pointer;
}
.schedule-btn {
  color: #7e9b4f;
  cursor: pointer;
  background: none;
  border: none;
  white-space: nowrap;
  font-size: 10px;
}
.time-slot {
  font-size: 12px;
}
.time-slot:has(td) {
  background: #7e974a;
}
td:first-child,
th:first-child {
  width: 21%;
}
</style>
